綜合了前面所講的，來稍微整理一下 Vue 的常用語法:
首先我們一樣先寫好 Vue 的相關資料，如下:

<script>
var app = new Vue({
    el: '#app',
    data: {
        text: '這是一段文字',
        rawHtml: `<span class="text-danger">紅色文字</span>`,
        number1: 100,
        number2: 300,
        htmlId: 'HTMLID',
        isDisabled: true
    }
})
</script>

接著來重新整理一下:

1. 在 HTML 內使用雙大括號呈現資料

<p>{{ text }}</p>

2. 在 HTML 內插入包含 HTML 標籤的字串

<p>{{ rawHtml }}</p>

會發現這時候會連 HTML 標籤一起當作字串輸出出來
這時候就要採用 v-html 指令

<p v-html="rawHtml"></p>

這時候就會是正常的了，而關於 v-html 的危險性可至 Vue 官方網站查看

3. 單次綁定
   單次綁定的意思是指說，今天我的資料只做一次的輸出後便不再做雙向的綁定，這時候可以使用 v-once 指令

<div v-text="text" v-once></div>

這時候字串只會被輸出一次，就不再做雙向綁定了

4. 其他的表達式
   除了第一種方法來呈現資料外，其實在雙大括號內也可以使用 JS 的語法來做呈現
   例如基本的字串相加:

<p>
{{ text + rawHtml }}
</p>

或者直接撰寫 JS:

<p>{{ text.split('').reverse().join('') }}</p>

這樣文字就會直接反轉

數字的計算:

<p>{{ number1 + number2 }}</p>

5.綁上 HTML 標籤 ID 屬性

<p :id="htmlId"></p>

上述是採用 v-bind 的縮寫